<template>
    <div class="goods">
        <div class="left">
            <a :href="`#${item.name}`" v-for="item in goods" :key="item.name">{{ item.name }}</a>
        </div>
        <div class="right">
            <ul>
                <li v-for="(item, index) in goods" :key="item.name" class="aa">
                    <h3 :id="item.name">{{ item.name }}</h3>
                    <ul>
                        <li v-for="foods in item.foods">
                            <img :src="foods.image" alt="">
                            <div>
                                <h4>{{ foods.name }}</h4>
                                <span class="description">{{ foods.description }}</span>
                                <p class="sellCount">
                                    <span>月售{{ foods.sellCount }}</span>
                                    <b>好评率{{ foods.rating }}%</b>
                                </p>
                                <p style="font-size: 3.7333vw;">
                                    <span style="color:red; font-weight:900; margin-right:2.1333vw">￥{{ foods.price
                                    }}</span>
                                    <del v-if="foods.oldPrice !== ''" style="font-size: 2.6667vw;">￥{{ foods.oldPrice
                                    }}</del>
                                </p>
                                <div>
                                    <span v-if="foods.id !== 0" @click="sitCarListReduce(foods)">-</span>
                                    <b v-if="foods.id !== 0">{{ foods.id }}</b>
                                    <em @click="sitCarListAdd(foods)">+</em>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
//  导入 vuex 辅助函数
import { mapState, mapActions ,mapMutations} from 'vuex'
export default {
    methods: {
        ...mapMutations(['sitCarListAdd','sitCarListReduce']),
    },

    computed: {
        ...mapState(['goods', 'quantity', 'carList', 'isShow'])
    },
}   
</script>

<style lang="less" scoped>
.goods {
    width: 100%;
    height: calc(100% - 46.4vw - 15.3333vw);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .left {
        width: 21.3333vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 1.3333vw;

        a {
            width: 21.3333vw;
            font-size: 3.2vw;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1;
            height: 14.4vw;
            position: relative;

            &::after {
                content: "";
                display: block;
                width: 14.9333vw;
                height: .1333vw;
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                bottom: 0;
                background-color: rgb(7 17 27 /.1);
            }
        }
    }

    .right {
        flex: 1;
        overflow: auto;
        line-height: 1;

        ul {
            width: 100%;
            height: 100%;
            list-style: none;

            li {
                width: 100%;

                h3 {
                    width: 100%;
                    height: 6.9333vw;
                    line-height: 6.9333vw;
                    background-color: #f3f5f7;
                    border-left: .6667vw solid #d9dde1;
                    text-indent: 2.6667vw;
                    color: rgb(147 153 159);
                    font-size: 3.2vw;
                }

                ul {
                    padding: 4.8vw;
                    height: calc(100% - 6.9333vw);
                    box-sizing: border-box;

                    li {
                        height: 100%;
                        width: 100%;
                        display: flex;
                        margin-bottom: 4.8vw;
                        padding: 0 4.8vw 4.8vw 4.8vw;
                        border-bottom: 1px solid rgb(7 17 0/.1);

                        img {
                            height: 15.2vw;
                            margin-right: 2.6667vw;
                        }

                        div {
                            position: relative;
                            flex: 1;

                            h4 {
                                font-size: 3.4667vw;
                                color: rgb(7, 17, 27);
                                line-height: 1;
                                font-weight: 700;
                            }

                            .description {
                                font-size: 2.6667vw;
                                margin: 16px 0;
                                color: rgb(147, 153, 159);
                                margin: 2.1333vw 0;
                                display: block;
                                width: 33.3333vw;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }

                            .sellCount {
                                font-size: 2.6667vw;
                                color: rgb(147, 153, 159);
                                margin-bottom: 2.1333vw;
                            }

                            div {
                                position: absolute;
                                right: 0;
                                bottom: 0;
                                width: 16vw;
                                height: 5.3333vw;
                                display: flex;
                                justify-content: flex-end;

                                span,
                                em {
                                    width: 5.3333vw;
                                    height: 5.3333vw;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    box-sizing: border-box;
                                    border: .6667vw solid skyblue;
                                    border-radius: 50%;
                                    font-weight: 700;
                                    font-size: 4vw;
                                    line-height: 5.3333vw;
                                }

                                span {
                                    background-color: #fff;
                                    color: skyblue;
                                }

                                em {
                                    background-color: skyblue;
                                    color: #fff;
                                }

                                b {
                                    flex: 1;
                                    text-align: center;
                                    line-height: 5.3333vw;
                                    color: rgb(147 153 159);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>